<template>
  <ion-page>
    <ion-content>
      <form @submit.prevent="handleSubmit">
        <ion-item>
          <ion-icon :icon="person"/>
          <!-- <ion-label position="stacked" >Username</ion-label> -->
          <ion-input label="Username" label-placement="floating" fill="solid"  required></ion-input>
        </ion-item>
        <ion-item>
          <ion-icon :icon="lockClosed"/>
          <!-- <ion-label position="stacked">Password</ion-label> -->
          <ion-input label="Password" label-placement="floating" fill="solid" required></ion-input>
        </ion-item>
        <ion-button type="submit" expand="block">Login</ion-button>
      </form>
    </ion-content>
  </ion-page>
</template>
 
<script setup>
import { ref } from 'vue';
//import api from 'axios';
import { useRouter } from 'vue-router';
import { alertController } from '@ionic/vue';
import {   lockClosed, person } from 'ionicons/icons';
import { IonPage,
          IonInput, 
          IonButton, 
          IonContent,
          IonItem,
          IonIcon
          } from '@ionic/vue';
const router = useRouter();
const userName = ref('');
const password = ref('');
 
// 处理登录事件
async function handleSubmit() {
  if (userName.value.trim() === 'admin' && password.value.trim() === 'password') {
    // 登录成功，跳转到首页
    router.push('/tabs/tab1');
  } else {
    // 登录失败，显示错误信息
    const alert = await alertController.create({
      header: '登录失败',
      message: '用户名或密码错误。',
      buttons: ['确定']
    });
    await alert.present();
  }

  // try {
  //   // 发起登录请求
  //   const response = await api.dispatch('login', form.value);
  //   // 登录成功，跳转到首页
  //   router.push('/tabs/tab1');
  //   console.error(response);
  // } catch (error) {
  //   // 登录失败，显示错误提示
  //   await alertController.create({
  //     header: 'Login failed',
  //     message: error.message,
  //     buttons: ['Confirm']
  //   }).then(alert => alert.present());
  // }
}
</script>

<style scoped>
 
 
</style>